<template>
	<view>
		<!-- 轮播图 -->
		<view class="re-swiper">
			<u-swiper
					:list="swiperList"
					indicator
					indicatorMode="line"
					circular
					height='219rpx'
			></u-swiper>
		</view>
		<view class="re-new">
			<view class="new-title">
				<view class="new-title-name">
					最新内容
				</view>
				<view class="new-title-more">
					查看更多
				</view>
			</view>
			<view class="new-list">
				<view class="new-list-item"
				v-for="item in newList"
				:key="item.id"
				@click="detail(item.id)"
				>
					<view class="new-item-img">
						<image :src="item.courseCover" ></image>
					</view>
					<view class="new-item-main">
						<view class="new-item-title">
							<!-- 晋级TypeScript高手，成为抢手的项目高手 -->
							{{item.courseName}}
						</view>
						<view class="new-item-type">
							{{courseType(item.courseLevel)}}
						</view>
						<view class="new-item-total">
							<view class="new-item-price" v-if="item.discountPrice==0">
								<view class="">
									免费
								</view>
							</view>
							<view class="new-item-price" v-else>
								<view class="">
									限时优惠
								</view>
								<view class="new-item-discountPrice">
									￥ {{item.discountPrice}}
								</view>
							</view>
							<view class="new-item-number">
								{{item.clicks}}人学习
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="recommend">
			<view class="new-title recommend-title">
				<view class="new-title-name">
					推荐好课
				</view>
				<view class="new-title-more">
					查看更多
				</view>
			</view>
			<view class="">
				<scroll-view scroll-x="true" class="nav-bar">
					<view class="nav-bar-wrap">
						<block v-for="item in reList" :key="item.id">
							<view class="nav-bar-item">
								<view class="nav-bar-item-img">
									<image :src="item.courseCover" ></image>
								</view>
								<view class="nav-bar-item-main">
									<view class="nav-bar-item-type">
										{{courseType(item.courseLevel)}} . {{item.purchaseCounter}}人报名
									</view>
									<view class="nav-bar-item-price" v-if="item.discountPrice==0">
										<view class="nav-bar-item-oprice">
											免费
										</view>
									</view>
									<view class="nav-bar-item-price" v-else>
										<view class="nav-bar-item-oprice">
											￥{{item.discountPrice}}
										</view>
										<view class="nav-bar-item-pprice">
											￥{{item.salePrice}}
										</view>
									</view>
									<view class="nav-bar-item-pricetxt">
										限时优惠
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="re-lo">
			<view class="new-title">
				<view class="new-title-name">
					大家都在看
				</view>
			</view>
			<view class="new-list">
				<view class="new-list-item"
				v-for="item in courseList"
				:key="item.id"
				>
					<view class="new-item-img">
						<image :src="item.courseCover" ></image>
					</view>
					<view class="new-item-main">
						<view class="new-item-title">
							<!-- 晋级TypeScript高手，成为抢手的项目高手 -->
							{{item.courseName}}
						</view>
						<view class="new-item-type">
							{{courseType(item.courseLevel)}}
						</view>
						<view class="new-item-total">
							<view class="new-item-price" v-if="item.discountPrice==0">
								<view class="">
									免费
								</view>
							</view>
							<view class="new-item-price" v-else>
								<view class="">
									限时优惠
								</view>
								<view class="new-item-discountPrice">
									￥ {{item.discountPrice}}
								</view>
							</view>
							<view class="new-item-number">
								{{item.clicks}}人学习
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getSliders} from '@/api/home.js'
	import {mostNew,mostHeat} from '@/api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		mixins: [mixin],
		props: {
			courseList: {
				type: Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				newList: [],
				reList: [],
			}
		},
		methods: {
			detail(id){
				uni.navigateTo({
					url:'/pages/details/details'
				})
			}
		},
		mounted() {
			// let that = this 
			// uni.request({
			// 	url:"/slider/getSliders",
			// 	success(res) {
			// 		// console.log(res.data.data.list)
			// 		that.swiperList = res.data.data.list.map(v=>v.imageUrl)
			// 		console.log(this.swiperList)
			// 	}
			// })
			getSliders().then(res=>{
				 console.log("1111111")
				 console.log(res)
				this.swiperList = res.list.map(v=>v.imageUrl)
			}),
			mostNew({
				pageNum:1,
				pageSize:3
			}).then(res=>{
				this.newList = res.pageInfo.list
				// console.log(res.pageInfo)
			}),
			mostNew({
				pageNum:1,
				pageSize:6
			}).then(res=>{
				this.reList = res.pageInfo.list
			})
			// searchCourse({
			// 	pageNum:1,
			// 	pageSize:3,
			// 	entity:{
			// 		sortBy:"clicks-desc"
			// 	}
			// }).then(res=>{
			// 	this.courseList = res.pageInfo.list
			// })
		}
	}
</script>

<style>
.re-swiper{
	padding: 14rpx;
}
/deep/ .u-swiper__indicator{
	right: 20rpx;
}
.re-new{
	padding: 14rpx;
}
.new-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 40rpx;
}
.new-title-name{
	font-size: 40rpx;
	font-weight: 400;
	color: #333333;
}
.new-title-more{
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
}

.new-list-item:after{
	content: '';	
	position: absolute;
	bottom: -20rpx;
	margin-top: 40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color:#ccc;
}
.new-list-item image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex: 1;
	display: flex;
    flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left: 23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #c5c5c5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	font-weight: 600;
	color: #FF4B5C;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left: 21rpx;
}
.recommend{
	padding-top: 40rpx;
}
.recommend-title{
	padding: 14rpx;
}
/deep/ ::-webkit-scrollbar{
	display: block;
	width: 0px !important;
	height: 0px !important;
}
.nav-bar-wrap{
	display: flex;
	flex-flow: column wrap;
	height: 634rpx;
}
.nav-bar-item{
	width: 265rpx;
	height: 286rpx;
	margin-top: 28rpx;
	margin-left: 17rpx;
	background: rgba(255, 255, 255, 0.39);
	box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
	border: 12rpx;
}
.nav-bar-item-img{
	width: 265rpx;
	height: 160rpx;
	border-radius: 12rpx;
	background-color: red;
}
.nav-bar-item-img image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.nav-bar-item-main{
	padding: 12rpx;
}
.nav-bar-item-price{
	display: flex;
	padding: 4rpx 0;
}
.nav-bar-item-oprice{
	font-size: 22rpx;
	font-weight: 500;
	color: #FF0018;
}
.nav-bar-item-pprice{
	padding-left: 10rpx;
	font-size: 18rpx;
	color: #B3B3B3;
	text-decoration: line-through;
}
.nav-bar-item-type{
	font-size: 21rpx;
	color: #7B7B7B;
}

.nav-bar-item-pricetxt{
	font-size: 19rpx;
	color: #FF6464;
}
.re-lo{
	padding: 14rpx;
}
</style>
